import { Col, Input, Row } from 'antd';
import React from 'react';
import styles from './index.less';

interface TwoColumnDisplayProps {
  leftTitle: string;
  rightTitle: string;
  data: Array<{ left: string | number; right: string | number }>;
}

const TwoColumnDisplay: React.FC<TwoColumnDisplayProps> = ({
  leftTitle,
  rightTitle,
  data,
}) => (
  <Row gutter={[8, 8]}>
    <Col span={12}>
      <div className={styles['section-label']}>{leftTitle}</div>
      {data.map((item, index) => (
        <Input
          key={`left-${index}`}
          value={item.left}
          readOnly
          className={styles['readonly-input']}
        />
      ))}
    </Col>
    <Col span={12}>
      <div className={styles['section-label']}>{rightTitle}</div>
      {data.map((item, index) => (
        <Input
          key={`right-${index}`}
          value={item.right}
          readOnly
          className={styles['readonly-input']}
        />
      ))}
    </Col>
  </Row>
);

export default TwoColumnDisplay;
